<template>

  <el-card class=" mt15">
    <div slot="header" class=" h4">
      公众号收益表
    </div>
    <div class="flex flex-between">
      <div class="flex ">
        <span class="mr10">时间筛选:   </span>
        <el-date-picker
          v-model="time"
          size="mini"
          type="daterange"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
      </div>
      <div class="flex flex-between">
        <span class="mr10">查看值:</span>
        <el-select
          v-model="mpid"
          filterable
          placeholder="请选择"
          size="mini">
          <el-option
            v-for="item in tencentList"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </div>
    </div>
    <bar-chart
      :datas="datas"
      :options="originOption"
      height="500px"
    />
    <div class="flex ">
      <span class="mr10">横轴:   </span>
      <el-button :type="type===1?'primary':''" size="mini" @click="type=1">时间(月)</el-button>
      <el-button :type="type===0?'primary':''" size="mini" @click="type=0">时间(周)</el-button>
    </div>
    <!--<div class="flex pdt15">-->
    <!--<span class="mr10">选择业绩:   </span>-->
    <!--<el-button size="mini" :type="performance===0?'primary':''" @click="performance=0">销售额/回款</el-button>-->
    <!--<el-button size="mini" :type="performance===1?'primary':''" @click="performance=1">订单数</el-button>-->
    <!--</div>-->
  </el-card>
</template>

<script>
  import barChart from '../../../components/chart'

  export default {
    name: 'TencentChart',
    components: {barChart},
    data() {
      const startDate = new Date(new Date().getTime() - 31 * 24 * 3600 * 1000)
      const endDate = new Date()
      const startTime = startDate.getFullYear() + '-' + (startDate.getMonth() + 1) + '-' + startDate.getDate()
      const endTime = endDate.getFullYear() + '-' + (endDate.getMonth() + 1) + '-' + endDate.getDate()
      const time = [startTime, endTime]

      var colors = ['#5793f3', '#d14a61', '#675bba']
      return {
        time: time,
        mpid: '',
        type: 0,
        tencentList: [
          {
            label: '全部',
            value: 0
          }
        ],
        performance: 0,
        originOption: {
          color: colors,
          tooltip: {
            trigger: 'axis',
          },
          label: {
            show: true,
            position: 'top'
          },
          legend: {
            data: ['销售额', '回款', '订单数']
          },
          grid: {
            x: 200
          },
          xAxis: [{
            type: 'category',
            data: []
          }],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: colors[0]
                }
              },
              name: '销售额'
            },
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: colors[2]
                }
              },
              name: '订单数'
            }
          ],
          series: [
            {
              name: '销售额',
              type: 'bar',
              data: [],
              label: {
                normal: {
                  show: true,
                  formatter: function (params) {
                    return (params.seriesName + '\n' + params.data)
                  },
                }
              },
              barWidth: '30%'
            },
            {
              name: '回款',
              type: 'bar',
              data: [],
              label: {
                normal: {
                  show: true,
                  formatter: function (params) {
                    return (params.seriesName + '\n' + params.data)
                  },
                }
              },
              barWidth: '30%'
            },
            {
              name: '订单数',
              type: 'bar',
              data: [],
              label: {
                normal: {
                  show: true,
                  formatter: function (params) {
                    return (params.seriesName + '\n' + params.data)
                  },
                }
              },
              barWidth: '30%'
            },
          ]
        },
        option: {}
      }
    },
    computed: {
      filter_infos(val) {
        const obj = {}
        obj.mpid = this.mpid
        obj.start_time = this.time[0]
        obj.End_time = this.time[1]
        obj.type = this.type
        return obj
      },
      datas() {
        return this.option
      }
    },
    watch: {
      filter_infos(val) {
        this.getTableList(val)
      }
    },
    mounted() {
      this.getTencentList()
    },
    methods: {
      // 获取公众号列表
      getTencentList() {
        this.$get('action/WechatNumber/tree')
          .then(res => {
            const list = []
            if (res.data.WechatTree) {
              res.data.WechatTree.forEach(item => {
                list.push({
                  label: item.name,
                  value: item.id
                })
              })
            }
            this.tencentList = this.tencentList.concat(list)
            this.mpid = 0
          })
          .catch(_ => console.log(1))
      },

      getTableList(data) {
        this.$get('action/WechatAdvs/fansAndmapsForm', data)
          .then(res => {
            let list
            const data = res.data
            const sale = []
            const returned = []
            const order_total = []
            const xAxis = []

            data.ad_price.forEach((item, index) => {
              sale[index] = item['sum(a.ad_price)']
              xAxis[index] = this.type ? item.days : (item.stat_date + '\n' + item.end_date)
              order_total[index] = item['count(a.id)']
              returned[index] = item['sum(a.real_price)']
            })
            this.option = {
              xAxis: [{
                type: 'category',
                data: xAxis
              }],
              series: [
                {
                  name: '回款',
                  type: 'bar',
                  data: returned,
                  yAxisIndex: 0,
                  barWidth: '20%'
                },
                {
                  name: '订单数',
                  type: 'bar',
                  data: order_total,
                  yAxisIndex: 1,
                  barWidth: '20%'
                },
                {
                  name: '销售额',
                  type: 'bar',
                  data: sale,
                  yAxisIndex: 0,
                  barWidth: '20%'
                }
              ]
            }
          })
      }
    }
  }
</script>

